<template>
    <div class="configMain">
        <div class="flex_1 currentConfig">
            <configList :currentConfiguration="currentConfiguration"></configList>
        </div>
        <div class="flex_1">history</div>
        <div class="flex_1">user config</div>
        <div class="p clear">
            <div class="a"></div>
            <div class="b"></div>
        </div>
    </div>
</template>

<script>
import configList from './configList';
export default {
    name: "tab-configuration",
    data() {
        return {
            currentConfiguration: [
                {
                    name: 'config1',
                    value: true
                },
                {
                    name: 'config2',
                    value: true
                },
                {
                    name: 'config3',
                    value: true
                },
                {
                    name: 'config4',
                    value: true
                },
                {
                    name: 'config5',
                    value: true
                },
            ]
        };
    },
    components: {
        configList
    },
    created() {
       console.log(1)
    },
    methods: {
        
    },
    computed: {
        
    }
};
</script>
<style scoped>
.configMain {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.flex_1 {
    flex: 1;
}

.operate {
    height: 20px;
    text-align: right;
}

.currentConfig ul li {
    margin: 5px 5px;
}

.active {
    background: red;
}

.clear::after {
    content: '';
    display: block;
    clear: both;
}

.p div {
    width: 300px;
    height: 300px;
}

.a {
    background: red;
    float: left;
}

.b {
    background: blue;
}
</style>
